<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import TheHeader from '@/components/home/TheHeader.vue';
import TheFooter from '@/components/home/TheFooter.vue';
import { isFirstVisit, setVisited } from '@/utils/auth';

// 导入登录/注册相关组件
import FormTabs from '@/components/com_login/FormTabs.vue';
import FormHeader from '@/components/com_login/FormHeader.vue';
import LoginForm from '@/components/com_login/LoginForm.vue';
import RegisterForm from '@/components/com_login/RegisterForm.vue';

const { t } = useI18n();
const router = useRouter();
const route = useRoute();

// 页面加载时检查是否是首次访问，或者URL包含register参数
onMounted(() => {
  if (route.query.register === 'true') {
    activeTabIndex.value = 1; // 切换到注册表单
  } else if (isFirstVisit()) {
    setVisited(); // 设置已访问标记
    activeTabIndex.value = 1; // 切换到注册表单
  }
});

// 表单标签页配置
const tabs = [
  { label: '登录', icon: 'fas fa-sign-in-alt' },
  { label: '注册', icon: 'fas fa-user-plus' }
];

// 当前激活的标签页
const activeTabIndex = ref(0);

// 处理标签页切换
const handleTabChange = (index) => {
  activeTabIndex.value = index;
  
  // 更新URL，但不重新加载页面
  const query = index === 1 ? { register: 'true' } : {};
  router.replace({ path: '/login', query });
};

// 处理登录成功
const handleLoginSuccess = (userData) => {
  // 显示登录成功提示
  console.log('登录成功：', userData);
  
  // 如果有重定向参数，则跳转到该页面
  if (route.query.redirect) {
    router.push(route.query.redirect);
  } else {
    // 否则跳转到首页
    router.push('/');
  }
};

// 处理注册成功
const handleRegisterSuccess = () => {
  // 3秒后自动切换到登录表单
  setTimeout(() => {
    router.replace('/login');
  }, 3000);
};

// 切换到注册表单
const switchToRegister = () => {
  handleTabChange(1);
};

// 切换到登录表单
const switchToLogin = () => {
  handleTabChange(0);
};
</script>

<template>
  <div class="login-page">
    <TheHeader />
    
    <div class="login-content">
      <div class="login-container">
        <div class="login-form-wrapper">
          <!-- 表单标签页 -->
          <FormTabs 
            :tabs="tabs" 
            :activeTab="activeTabIndex" 
            @tab-change="handleTabChange" 
          />
          
          <!-- 登录表单 -->
          <div v-if="activeTabIndex === 0" class="form-container login-form-container">
            <FormHeader 
              title="欢迎回来" 
              description="请登录您的账号，开始您的旅程" 
            />
            
            <LoginForm @login-success="handleLoginSuccess" />
          </div>
          
          <!-- 注册表单 -->
          <div v-if="activeTabIndex === 1" class="form-container register-form-container">
            <RegisterForm 
              @register-success="handleRegisterSuccess" 
              :onSwitchToLogin="switchToLogin" 
            />
          </div>
        </div>
        
        <div class="login-image">
          <!-- 这里使用一个中国旅游相关的背景图 -->
        </div>
      </div>
    </div>
    
    <TheFooter />
  </div>
</template>

<style scoped>
.login-page {
  min-height: 100vh;
  background-color: #f5f8fa;
  display: flex;
  flex-direction: column;
}

.login-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  height: 800px; /* 固定高度 */
}

.login-container {
  width: 1000px; /* 固定宽度 */
  height: 680px; /* 固定高度 */
  display: flex;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  background-color: #fff;
}

.login-form-wrapper {
  width: 500px; /* 固定宽度 */
  padding: 30px 50px 50px;
  background-color: #fff;
  overflow-y: visible; /* 改为visible，不使用滚动条 */
  height: 680px; /* 固定高度，与container一致 */
}

.form-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 登录表单容器样式 */
.login-form-container {
  padding-top: 10px;
}

/* 注册表单容器样式 */
.register-form-container {
  padding-top: 20px; /* 给注册表单一些顶部空间 */
}

/* 调整表单头部比例 */
.form-container > .form-header {
  flex: 0 0 auto;
  margin-bottom: 20px;
}

/* 调整表单比例 */
.form-container > form, 
.form-container > .register-form,
.form-container > .login-form {
  flex: 1 0 auto;
}

.login-image {
  width: 500px; /* 固定宽度 */
  background-image: url('@/assets/login/login-bg1.jpg');  /* 使用占位图，后续替换 */
  background-size: cover;
  background-position: center;
  position: relative;
}

.login-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  mix-blend-mode: multiply;
}

.register-link {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-top: 20px;
}

.register-link a {
  color: #00c389;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.register-link a:hover {
  color: #00a572;
  text-decoration: underline;
}

/* 响应式样式 */
@media (max-width: 1100px) {
  .login-container {
    width: 800px;
  }
  
  .login-form-wrapper {
    width: 450px;
  }
  
  .login-image {
    width: 350px;
  }
}

@media (max-width: 992px) {
  .login-container {
    flex-direction: column-reverse;
    width: 500px;
    height: 700px;
  }
  
  .login-image {
    width: 100%;
    height: 200px;
  }
  
  .login-form-wrapper {
    width: 100%;
    height: 500px;
    padding: 30px 40px 40px;
    overflow-y: visible; /* 确保在中等屏幕也不使用滚动条 */
  }
}

@media (max-width: 576px) {
  .login-content {
    padding: 30px 15px;
    height: auto;
  }
  
  .login-container {
    width: 100%;
    height: auto;
    min-height: 600px;
  }
  
  .login-form-wrapper {
    height: auto;
    min-height: 400px;
    padding: 20px 20px 30px;
    overflow-y: visible; /* 确保在小屏幕也不使用滚动条 */
  }
}
</style>
